<template>
	<view style="width: 100%;background-color: white;">
		<view style="width: 100%;height: 100vh;overflow-y: scroll;">
			<view style="margin: 0 0rpx;border-radius: 30rpx;width: calc(100% - 0rpx);padding-bottom: 0rpx;">
				<view v-for="(item,index) in introImages"
					:style="index == 0 ? {'margin-top': 0}:{'margin-top': -16 + 'rpx'} ">
					<view style="">
						<image :src="item" style="width: 100%;margin: 0rpx 0 0 0;" mode="widthFix"
							@click="addWx(index)">
						</image>

					</view>
				</view>
			</view>
		</view>
		<view style="">
			<image :src="flowImg" style="width: 100%;position: fixed;left: 0;bottom: 0;" mode="widthFix"
				@click="addWx(100)">
			</image>
		</view>
	</view>
</template>
<script>
	import {
		addClickRecord,
		getWechatURLLink,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";

	import animationType from '@/utils/animationType.js'
	const app = getApp();
	const comUrl =
		'https://pic.mae.vip/%E4%BA%BA%E5%83%8F%E5%AE%9E%E6%88%98%E7%8F%AD%E7%B4%A0%E6%9D%90/%E9%80%89%E5%99%A8%E6%9D%90/';
	export default {
		data() {
			return {
				myInfo: {},
				vipMenus: [],
				introImages: [comUrl + 'choose_000.jpg',
					comUrl + 'choose_001.jpg',
					comUrl + 'choose_002.jpg',
					comUrl + 'choose_003.jpg',
					comUrl + 'choose_004.jpg',
					comUrl + 'ch_2.jpg', comUrl +
					'ch_3.jpg',
					comUrl + 'ch_4.jpg', comUrl +
					'ch_5.jpg',
					comUrl + 'ch_6.jpg', comUrl +
					'ch_7.jpg',
					comUrl + 'ch_8.jpg', comUrl +
					'ch_9.jpg',
					comUrl + 'ch_10.jpg', comUrl +
					'ch_11.jpg',
					comUrl + 'ch_12.jpg', comUrl +
					'ch_13.jpg',
					comUrl + 'ch_14.jpg', comUrl +
					'ch_15.jpg',
					comUrl + 'ch_16.jpg', comUrl +
					'ch_17.jpg', comUrl +
					'ch_18.jpg',
				],
				flowImg: comUrl + 'ch_flow.png',
				userId: '',
				token: '',
			}
		},
		onLoad(options) {
			let that = this;
		},
		onShow: function() {
			let that = this;

		},
		mounted: function() {
			let that = this;

			let locatiojUrl = window.location.href;

			//let locatiojUrl =
			//	'https://mayimae.com/qz/pages/chooseCamera/index?phone= 01010101010&userId=337538&token=1202bdc5effd1ecbbd447deec7a6f78b&ran=1749108026348';

			that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);
			that.token = decodeURI(that.jqueryUrl(locatiojUrl).token);
		},
		methods: {
			addWx(index) {
				let that = this;
				console.log(index)

				let platform = uni.getSystemInfoSync().platform; //手机类型

				if (index == 2 || index == 5 || index == 7 || index == 9 || index == 13 || index == 15 || index == 17 ||
					index == 19 ||
					index == 100) {

					let pp = {};
					pp.userId = that.userId;
					pp.token = that.token;
					pp.platform = platform == 'ios' ? '苹果' : '安卓';
					pp.type = '客服_国补立减';
					addClickRecord(pp).then(res => {

					})

					if (platform == 'ios') {
						window.webkit.messageHandlers.goWechat.postMessage("");
					}
					if (platform == 'android') {
						window.location.href = 'goWechat';
					}
				}
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.firstbg {
		position: relative;
		display: inline-block;
		/* 确保容器适应图片大小 */
	}

	.lookmore {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
	}

	.zhuanshu-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 0rpx;
		/* 图片之间的间距，可选 */
	}

	.zhuanshu-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}

	.image-container {
		display: flex;
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		/* 容器宽度 */
		gap: 40rpx;
		/* 图片之间的间距，可选 */

	}

	.image-container image {
		flex: 1;
		/* 三等分关键代码 */
		width: auto;
		/* 修复某些浏览器的兼容性问题 */
		height: auto;
		/* 保持图片比例 */
		// object-fit: cover;
		/* 可选，控制图片如何填充空间 */
	}
</style>